<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>有道翻译</title>
    <link rel="shortcut icon" href="https://shared.ydstatic.com/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/home.css" />
  </head>
  <body>
    <div class="main">
      <div class="conterq">
        <div class="head">
          <img src="./img/logo.png" alt="" />
          <ul>
            <li>
              <a href="#"
                >有道写作
                <span>new</span>
              </a>
            </li>
            <li><a href="#">同传</a></li>
            <li><a href="#">翻译机</a></li>
            <li><a href="#">人工翻译</a></li>
            <li><a href="#">翻译API</a></li>
            <li><a href="#">翻译APP</a></li>
            <li>
              <a class="dl" href="#">登录</a>
              <!-- 遮罩层 -->
              <div class="zzc hide">
                <!-- 登录层 -->
                <div class="dlc">
                  <!-- 关闭按钮 -->
                  <a href="#"></a>
                  <h3 class="login-title">使用网易邮箱登录</h3>
                  <div class="content ">
                    <div class="urs-login-block">
                      <div class="hascheckcode">
                        <div class="m-cnt">
                          <div class="m-container ">
                            <!-- 账号 -->
                            <div class="inputbox">
                              <div class="u-logo">
                                <div class="u-logo-img1"></div>
                              </div>
                              <div class="u-input">
                                <input type="text" placeholder="邮箱帐号或手机号">
                              </div>
                            </div>
                            <div class="fur-change-email"></div>
                            <!-- 密码 -->
                            <div class="inputbox">
                              <div class="u-logo">
                                <div class="u-logo-img2"></div>
                              </div>
                              <div class="u-input box">
                                <input type="text" placeholder="8-16位密码，区分大小写">
                              </div>
                            </div>
                            <!-- 滑块验证码 -->
                            <div class="ckbox ">
                              <div class="ScapTcha">
                                <div class="yidun">
                                  <div class="yidun_control">
                                    <div class="yidun_slider">
                                      <span></span>
                                    </div>
                                    <div class="yidun_tips">
                                      <span>向右拖动滑块填充拼图</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- 登录按钮 -->
                            <div class="dlan">
                              <a>登&nbsp;&nbsp;录</a>
                            </div>
                            <!-- 免登录框 -->
                            <div class="m-unlogin">
                              <a href="">忘记密码？</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 登录方式 -->
                  <div class="third-login">
                    <a class="weixin" href="">
                      <img src="./img/weixin@2x.png" alt="">
                    </a>
                    <a class="weibo" href="">
                      <img src="./img/weibo@2x.png"></img>
                    </a>
                    <a class="qq" href="">
                      <img src="./img/qq@2x.png" alt="">
                    </a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <div class="box">
          <div class="left">
            <div>
              <input type="text" placeholder="自动检测语言" />
            </div>
            <div class="btn">
              <span>翻译</span>
            </div>
            <div class="btn" style="margin-left: 6px; background: #fff; border: 1px solid #e02433; color: #e02433">
              <span>人工翻译</span>
            </div>
          </div>
          <!-- 右边 -->
          <div class="right">
            <input type="checkbox" id="huaci" />
            <label for="huaci">划词</label>
          </div>
        </div>
      </div>
      <!-- 翻译 -->
      <div class="fanyi">
        <div class="box2">
          <!-- 输入框 -->
          <div class="shuru">
            <textarea
              name=""
              id=""
              cols="30"
              rows="10"
              placeholder="请输入你要翻译的文字或网址"
              style="font: size 24px; line-height: 30px; height: 156px; overflow: auto"
            ></textarea>
          </div>
          <!-- 译文框 -->
          <div class="shuchu"></div>
        </div>
      </div>
      <!-- 图标 -->
      <div class="tubiao">
        <div class="col">
          <!-- 上层 -->
          <div class="shang">
            <ul>
              <li>
                <a href="./rengonfanyi.html">
                  <div class="item" style="margin-left: 134px">
                    <img src="./img/logo_fanyi.png" alt="" />
                    <div class="k">
                      <span>有道人工翻译</span>
                      <div style="font-size: 12px">
                        新用户专享100元翻译礼包
                        <br />
                        立即获取>>
                      </div>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="./youdaoxiezuo.html">
                  <div class="item" style="margin-left: 110px">
                    <img src="./img/logo_writing.png" alt="" />
                    <div class="k">
                      <span>有道英文写作</span>
                      <div style="font-size: 12px">精准解析文章错误，智能修改，实现完美英文写作</div>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="./youdaoxuexi.html">
                  <div class="item" style="margin-left: 110px">
                    <img src="./img/logo_fanyiwang.png" alt="" />
                    <div class="k">
                      <span>有道翻译王</span>
                      <div style="font-size: 12px">43种语言的智能翻译机离线翻译更强大</div>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="./youdaocidian.html">
                  <div class="item" style="margin-left: 110px; margin-right: 133px">
                    <img src="./img/logo_cidian.png" alt="" />
                    <div class="k">
                      <span>有道词典</span>
                      <div style="font-size: 12px">支持全文翻译和屏幕取词智能调整语序</div>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!-- 下层 -->
          <div class="xia">
            <img src="./img/banner-2022dict-big.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 底层 -->
      <div class="foot">
        <div class="col3-1">
          <a href="">有道首页</a>
          <span>|</span>
          <a href="">有道智选</a>
          <span>|</span>
          <a href="">有道精品课</a>
          <span>|</span>
          <a href="">关于有道</a>
          <span>|</span>
          <a href="">官方博客</a>
          <p>
            &copy 2022 网易公司
            <a href="">网易公司</a>
            <a href="">隐私政策</a>
            京ICP证080268
            <a href="">京ICP备10005200号</a>
          </p>
        </div>
      </div>
    </div>
    <script>
      // 遮罩层
      const dl = document.querySelector(".head>ul>li>.dl")
      dl.onclick = function(){
        document.querySelector(".head ul li .zzc").classList.remove("hide")
      }
      //关闭
      const guanbi = document.querySelector(".head>ul>li>.zzc>.dlc>a")
      guanbi.onclick = function(){
        document.querySelector(".head ul li .zzc").classList.add("hide")
      }
    </script>
  </body>
</html>
